﻿<!DOCTYPE html>
<html>
<head>
    <title>JsViews - with Templates</title>
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="Scripts/jsrender.js" type="text/javascript"></script>
    <script src="Scripts/jquery.observable.js" type="text/javascript"></script>
    <script src="Scripts/jquery.views.js" type="text/javascript"></script>
</head>
<body>


    <h2>JsViews - with Templates</h2>
    <div id="personContainer"></div>

    <script type="text/javascript">
        var vm = {
            person: {
                firstName: "John",
                lastName: "Papa",
                showIt: "hidden",
                deco: "line-through"
            }
        };

        $(document).ready(function () {
            $("#personContainer").link(vm, "#personTmpl");
        });
    </script>
    <script id="personTmpl" type="text/x-jquery-tmpl">
        <div>
            First Name: <input data-getfrom="[person.firstName]" data-to="[person.firstName]" /><br />
            Last Name: <input data-getfrom="[person.lastName]" data-to="[person.lastName]" /><br />
            Full Name is
            <span data-getfrom="[person.firstName]" />
            <span data-getfrom="[person.lastName]" />
        </div>
    </script>
</body>
</html>
